<template>
	<div class="page">
		<div class="mid">
			<img src="../../assets/success.png" width="84" height="79">
			<div class="successText">支付成功</div>
			<el-button class="detail-Info" @click="exit">退出（{{time}}S）</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				time : 20,
				setInterval : ""
			}
		},
		created() {
			this.setTimeOut();
		},
		destroyed () {
			clearInterval(this.setInterval);
		},
		methods : {
			setTimeOut () {
				this.setInterval = setInterval(()=>{
					console.log(this.time)
					if (this.time >= 1) {
						this.time = --this.time;
					} else {
						this.exit();
					}
				},1000);
			},
			exit () {
				clearInterval(this.setInterval);
				this.$router.push({
					name : "detail",
					params : {
						pay : "success"
					}
				});
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.page {
		text-align: center;
	}
	.successText {
		font-size: 18px;
		font-weight: 700;
		color: #00306D;
	}
	.mid {
		width: 200px;
		height: 79px;
		position: absolute;
		left: 50%;
		top:20%;
		margin-left: -100px;
		margin-top: -39.5px;
	}
	 button {
		border: none;
		width: 132px;
		height: 35px;
		font-size: 15px;
		font-weight: bold;
		line-height : 0px
	}
	.detail-Info {
		margin-top: 43px;
		background: url(../../assets/bluebg.png);
		background-size: 100% 100%;
		color: #FFEA00;
	}
</style>
